<template>
  <div>
    <!--头部-->
    <header class="publicHeader">
      <h1>超市订单管理系统</h1>
      <div class="publicHeaderR">
        <p><span>下午好！</span><span style="color: #fff21b"> 系统管理员</span> , 欢迎你！</p>
        <a href="jsp/logout.do">退出</a>
      </div>
    </header>
    <!--时间-->
    <section class="publicTime">
      <span id="time">2015年1月1日 11:11  星期一</span>
      <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
    </section>
    <!--主体内容-->
    <section class="publicMian ">
      <div class="left">
        <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
        <nav>
          <ul class="list">
            <li><a href="jsp/bill.do?method=query">订单管理</a></li>
            <li><a href="#/providerManager">供应商管理</a></li>
            <li><a href="#/userManager">用户管理</a></li>
            <li><a href="jsp/pwdmodify.jsp">密码修改</a></li>
            <li><a href="jsp/logout.do">退出系统</a></li>
          </ul>
        </nav>
      </div>
      <div class="right">
        <div class="location">
          <strong>你现在所在的位置是:</strong>
          <span>用户管理页面 >> 用户添加页面</span>
        </div>
        <div class="providerAdd">
          <div>
            <label for="userCode">用户编码：</label>
            <input type="text" name="userCode" id="userCode" value="" v-model="user.userCode" @blur="checkCode">
            <!-- 放置提示信息 -->
            <font color="red">{{ errorCode }}</font>
          </div>
          <div>
            <label for="userName">用户名称：</label>
            <input type="text" name="userName" id="userName" value="" v-model="user.userName">
            <font color="red"></font>
          </div>
          <div>
            <label for="userPassword">用户密码：</label>
            <input type="password" name="userPassword" id="userPassword" value="" v-model="user.password">
            <font color="red"></font>
          </div>
          <div>
            <label for="ruserPassword">确认密码：</label>
            <input type="password" name="ruserPassword" id="ruserPassword" value="" v-model="user.password1">
            <font color="red"></font>
          </div>
          <div>
            <label>用户性别：</label>
            <select name="gender" id="gender" v-model="user.gender">
              <option value="1">女</option>
              <option value="2">男</option>
            </select>
          </div>
          <div>
            <label for="birthday">出生日期：</label>
            <input type="date" id="birthday" name="birthday" v-model="user.birthday">
            <font color="red"></font>
          </div>
          <div>
            <label for="phone">用户电话：</label>
            <input type="text" name="phone" id="phone" value="" v-model="user.phone" @blur="checkPhone">
            <font color="red">{{ errorPhone }}</font>
          </div>
          <div>
            <label for="address">用户地址：</label>
            <input name="address" id="address" value="" v-model="user.address">
          </div>
          <div>
            <label>用户角色：</label>
            <!-- 列出所有的角色分类 -->
            <select name="userRole" id="userRole" v-model="user.role"></select>
            <font color="red"></font>
          </div>
          <div class="providerAddBtn">
            <input type="button" name="add" id="add" value="保存" @click="saveUser">
            <input type="button" id="back" name="back" value="返回" @click="backToUser">
          </div>
        </div>
      </div>
    </section>


    <footer class="footer">
      版权归关老师
    </footer>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "UserSave",
  data() {
    return {
      user: {
        userCode: '',
        userName: '',
        password: '',
        password1: '',
        gender: 2,
        birthday: '2022-11-11',
        phone: '',
        address: '',
        role: 1
      },
      lastPage: 0,
      total: 0,
      errorPhone: '',
      errorCode: '',
      b1: false,
      b2: false
    }
  },
  created() {
    this.lastPage = this.$route.params.pages
    this.total = this.$route.params.total
    console.log(this.lastPage)
    console.log(this.total)
  },
  methods: {
    saveUser() {
      if (this.b1 && this.b2) {
        let _this = this;
        let data = new URLSearchParams();
        data.append('userCode', this.user.userCode)
        data.append('userName', this.user.userName)
        data.append('userPassword', this.user.password)
        data.append('gender', this.user.gender)
        data.append("birthday", this.user.birthday)
        data.append('phone', this.user.phone)
        data.append('address', this.user.address)
        data.append('userRole', this.user.role)
        data.append('lastPage', this.lastPage)
        data.append('total', this.total)
        axios({
          url: '/api/smbms-user/user',
          method: 'post',
          data: data
        }).then((response) => {
          if (response.data.success) {
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
            _this.$router.push('#/userManager')
          } else {
            this.$message({
              type: 'info',
              message: '添加失败'
            });
          }
        })
      } else {
        this.$message({
          type: 'error',
          message: '添加失败'
        });
      }

    },
    checkPhone() {
      let _this = this;
      axios.get("/api/smbms-user/user/phone/" + this.user.phone)
          .then((response) => {
            if (response.data.success) {
              _this.errorPhone = '你的手机号可以使用！';
              _this.b1 = true
            } else {
              _this.errorPhone = '你的手机号已被占用';
              _this.b1 = false
            }
          })
    },
    checkCode() {
      let _this = this;
      axios.get("/api/smbms-user/user/code/" + this.user.userCode)
          .then((response) => {
            if (response.data.success) {
              _this.errorCode = '你的账号可以使用！';
              _this.b2 = true
            } else {
              _this.errorCode = '你的账号已被占用';
              _this.b2 = false
            }
          })
    }
  }
}
</script>


<style lang="css">
/*引入外部css文件*/
@import url('../assets/css/style.css');
@import url('../assets/css/public.css');
</style>